<template>
  <div class="invest-detail">
    <div class="invest-detail-header">
      <ul>
        <li 
          v-for="(item, index) in headerInfo" 
          @click="toggle(index)"
          :style="{borderBottom: currentHeader === index ? '3px solid' + item.bgColor : 'none'}">
          <div :style="{
              background: currentHeader === index ? item.bgColor : '#fff',
              borderColor: currentHeader === index ? 'transparent' : '#e5e5e5'}">
            <span :class="item.icon"
              :style="{color: currentHeader === index ? '#fff' : item.bgColor}"></span>
          </div>
          <p>{{ item.text }}</p>
        </li>
      </ul>
      <div class="border border-1px"></div>
    </div>
    <div class="invest-detail-container">
      <keep-alive>
        <component :is="currentView"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
  import control from './control_item'
  import describe from './describe_item'
  import history from './history_item'
  import info from './info_item'
  
  export default {
    data () {
      return {
        currentView: describe,
        currentHeader: 0,
        headerInfo: [
          {
            icon: 'icon-desc',
            text: '项目描述',
            bgColor: '#35d384'
          },
          {
            icon: 'icon-risk',
            text: '风控措施',
            bgColor: '#ff6562'
          },
          {
            icon: 'icon-relevant',
            text: '相关资料',
            bgColor: '#fdc440'
          },
          {
            icon: 'icon-invest-history',
            text: '出借记录',
            bgColor: '#ff9333'
          }
        ]
      }
    },
    methods: {
      toggle (index) {
        this.currentHeader = index
        switch (index) {
          case 0:
            this.currentView = describe
            break
          case 1:
            this.currentView = control
            break
          case 2:
            this.currentView = info
            break
          case 3:
            this.currentView = history
            break
          default:
            this.currentView = describe
            break
        }
      }
    },
    components: {
      control,
      info,
      history,
      describe
    }
  }
</script>

<style lang='scss'>
  @import '../../common/scss/tool.scss';
  @import '../../common/scss/_variable.scss';

  .invest-detail {
    &-header {
      ul {
        display: flex;
        justify-content: space-around;
        padding-top: 30px;
        color: $base-666;
        font-size: 30px;
        text-align: center;
        li {
          flex: 0 0 130px;
          padding-bottom: 30px;
          div {
            width: 96px;
            height: 96px;
            border: 1px dotted $base-e5e5e5;
            border-radius: 50%;
            margin: 0 auto 30px auto;
            span {
              line-height: 96px;
              font-size: 46px;
            }
          }
        }
      }
      .border {
        height: 2px;
        @include border-1px(#{$base-e5e5e5});
      }
    }
    &-container {
      padding: 40px 30px;
    }
  }
</style>
